<template>
    <div class="table-container">
        <Layout>
            <Header class="tb-head">
                <div class="search-box">
                    <Row>
                        <Col span="20">
                        <slot name="searchBox" style="float: left"></slot>

                        <div class="float: left" v-if="needSearch">
                            <Button type="primary" style="margin-left: 10px" v-if="!hasMoreSer" @click="getData">搜索</Button>
                            <Button type="primary" style="margin-left: 10px" v-if="needMoreSer" :icon="searchIcon" @click="showMore">高级搜索</Button>
                        </div>&nbsp;
                        </Col>
                        <Col span="4" style="text-align: right">
                        <Button type="primary" style="margin-right: 10px" @click="handleAdd">添加</Button>
                        <Poptip trigger="hover" placement="bottom-end" title="提示" content="刷新会将搜索内容清空">
                            <Button type="success" @click="handleRefresh">刷新</Button>
                        </Poptip>
                        </Col>
                    </Row>
                </div>
            </Header>
            <Content class="tb-con">
                <div class="tb-con-ser-con" v-if="hasMoreSer">
                    <slot name="searchMoreBox" style="float: left"></slot>
                    <Button type="primary" style="margin-left: 10px" @click="getData">搜索</Button>
                </div>
                <Table class="tb-con-table" :loading="tbLoading" :data="tableData" border :columns="columns" stripe />
            </Content>
            <Footer class="tb-foot">
                <Row>
                    <Col span="6"> &nbsp;
                    <Button type="error" @click="handleRemove({}, 'more')">批量删除</Button>
                    </Col>
                    <Col span="18" style="text-align:right">
                    <paginarion style="margin-right: 10px" :pageInfo.sync="pageInfo" @pageChange="getData"></paginarion>
                    </Col>
                </Row>
            </Footer>
            <!-- 弹出的对话框 -->
            <Modal v-model="showModal" :title="dialogTitle" width="60%">
                <slot name="dialog"></slot>
                <div slot="footer">
                    <Button type="default" @click="showModal = false">取消</Button>
                    <Button type="primary" @click="commitModal">确认</Button>
                </div>
            </Modal>
        </Layout>
    </div>
</template>

<script>
    import {
        tbAction
    } from '@/api/table.js';
    import paginarion from './page.vue';
    import arrUtil from '@/libs/unique.js'
    export default {
        props: ['apis', 'cols', 'searchInfo', 'editInfo', 'needMoreSer', "needSearch"],
        components: {
            paginarion
        },
        data() {
            return {
                // 表格数据
                tableData: [],
                // 高级搜索按钮的图标
                searchIcon: "ios-arrow-down",
                // 表格列的数据
                columns: this.cols,
                // 控制是否显示高级搜索块
                hasMoreSer: false,
                // 分页的数据
                pageInfo: {
                    cur: 1,
                    total: 0,
                    size: 20
                },
                // 表格的loading
                tbLoading: true,
                // 控制对话框显示隐藏
                showModal: false,
                // 对话框的标题
                dialogTitle: "",
                // 判断点击的是编辑还是添加按钮
                handleType: '',
                // 删除原因
                delRemark:""
            }
        },
        methods: {
            // 获取表格数据
            getData() {
                let params = {};
                let url = '';
                // 根据searchInfo判断是否为搜索
                if (JSON.stringify(this.searchInfo) != '{}') {
                    url = this.apis['search'];
                    params = this.searchInfo;
                } else {
                    url = this.apis['list']
                    params = {
                        page: this.pageInfo.cur,
                        size: this.pageInfo.size
                    }
                }
                this.tbLoading = true;
                tbAction(params, url).then(res => {
                    this.tableData = res.data.list;
                    this.tbLoading = false;
                    this.pageInfo.total = res.data.total;
                }).catch(err => {
                    this.tbLoading = false;
                })

            },
            // 编辑事件,先进行判断是否需要打开新的页面
            handleEdit(param) {
                let payload = param;
                if (!payload.needNew) {
                    this.dialogTitle = '编辑';
                    this.handleType = "update";
                    this.showModal = true;
                } else {
                    this.$router.push({
                        path: param.path,
                        query: param.query
                    })
                }
            },
            // 删除事件
            handleRemove(id) {
                // let resultArr = []
                // if (type == 'one') {
                //     resultArr.push(params)
                // } else {
                //     resultArr = arrUtil.unique(this.checkIds);
                // }
                // const _self = this;
                // this.$Modal.confirm({
                //     title: '警告!',
                //     content: '该操作将永久删除数据，你确定要继续吗？',
                //     closable: true,
                //     onOk: () => {
                //         tbAction({
                //             ids: resultArr,
                //             remark: "删除原因"
                //         }, this.apis.remove).then(res => {
                //             this.tbLoading = true;
                //             this.getData();
                //             if (res) {
                //                 this.$Message.success('操作成功！')
                //             }
                //         }).catch(err => {
                //             this.tbLoading = false;
                //         })
                //     }
                // });
                // iview confirm this指向问题
                const _self = this;
                this.$Modal.confirm({
                    title: '提示',
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.delRemark,
                                autofocus: true,
                                placeholder: '请输入删除原因'
                            },
                            style: {
                                marginTop: '20px'
                            },
                            on: {
                                input: (val) => {
                                    _self.delRemark = val;
                                }
                            }
                        })
                    },
                    onOk: () => {
                        tbAction({
                            ids: id,
                            remark: _self.delRemark
                        }, this.apis.remove).then(res => {
                            this.tbLoading = true;
                            _self.delRemark = '';
                            this.getData();
                            if (res) {
                                this.$Message.success('操作成功！');
                            }
                        }).catch(err => {
                            this.tbLoading = false;
                        })
                    },
                    onCancel: () => {
                        _self.delRemark = '';
                    }
                })
            },
            // 添加事件
            handleAdd() {
                this.$emit('handleAdd');
            },
            // 验证点击添加按钮后的操作，是否需要新打开一个页面，以及修改对话框的标题
            afterAdd(param) {
                if (!param.needNew) {
                    this.dialogTitle = '添加';
                    this.showModal = true;
                    this.handleType = 'save';
                } else {
                    this.$router.push({
                        path: param.path,
                        query: param.query
                    })
                }
            },
            // 刷新表格数据
            handleRefresh() {
                // 将搜索的字段清空
                for (var x in this.searchInfo) {
                    this.searchInfo[x] = undefined;
                }
                this.tbLoading = true;
                this.getData();
            },
            // 高级搜索事件
            showMore() {
                if (!this.hasMoreSer) {
                    this.searchIcon = 'ios-arrow-up'
                } else {
                    this.searchIcon = 'ios-arrow-down'
                }
                this.hasMoreSer = !this.hasMoreSer;
            },
            // 对话框的提交事件，根据父组件传过来的参数判断表单验证是否通过
            commitModal() {
                let param = {
                    ok: true
                }
                // 将事件派发到父组件，根据父组件表单验证返回的结果判断是否调用接口
                this.$emit("beforeCommit", param)
                if (param.ok) {
                    let api = '';
                    let params = this.editInfo;
                    tbAction(params, this.apis[this.handleType]).then(res => {
                        this.showModal = false;
                        this.tbLoading = true;
                        this.$Message.success('操作成功！');
                        this.getData();
                    }).catch(err => {
                        this.tbLoading = false;
                    })
                }
            }
        },
        mounted() {
            this.getData();
        }
    }
</script>

<style lang="less" scoped>
    .table-container {
        width: 98%;
        height: 98%;
        margin: 1%;
        background-color: #fff;
        box-shadow: 0 1px 2px #ccc;
        .tb-head {
            background-color: #fff;
            .search-box {
                padding: 0 20px;
            }
        }
        .tb-con {
            background-color: #fff;
            &-ser-con {
                padding: 0 70px;
                min-height: 54px;
                line-height: 50px;
                overflow-y: auto;
                margin-bottom: 10px;
            }
            &-table {}
        }
        .tb-foot {
            padding: 10px;
            background-color: #fff;
        }
    }
</style>

